<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-flex row>
        <!-- 查询数据表格 -->
        <v-data-table hide-actions :loading="showProgress" :headers="headers" :items="tableData" class="elevation-1">
          <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
            <td class="text-xs-center">
              <v-avatar size="36">
                <img :src="props.item.headUrl" alt="">
              </v-avatar>
            </td>
            <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
            <!-- <td class="text-xs-center subheading">{{ props.item.telphone }}</td> -->
            <td class="text-xs-center subheading">{{ props.item.proxyLevel | ProxyLevel }}</td>
            <td class="text-xs-center subheading">{{ props.item.superId }}</td>
            <td class="text-xs-center subheading">{{ props.item.totalSale }}</td>
            <td class="text-xs-center subheading">{{ props.item.createTime }}</td>
            <td class="text-xs-center">
              <v-btn flat round dark color="green darken-1" class="mx-1" @click="agentDetail(props.item)">
                <span class="mx-1">代理资料</span>
                <v-icon color="green darken-1">perm_contact_calendar</v-icon>
              </v-btn>
            </td>
          </template>
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">暂无数据</span>
            </div>
          </template>

        </v-data-table>
        <div class="text-xs-center my-2">
          <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
        </div>

      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import * as agent from '../../api/agent'
import {mapState} from 'vuex'

export default {
  data: () => ({
    showProgress: false,
    limit: 5,
    offset: 0,
     pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    queryForm: {
      startDate: "",
      endDate: "",
      lftid: "",
      nickname: "",
      superId: "",
      realName: "",
      telphone: ""
    },
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    tableData: [],
    headers: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "等级", value: "saleLevel", align: "center", sortable: false },
      { text: "上级ID", value: "superId", align: "center", sortable: false },
      { text: "业绩", value: "sale", align: "center", sortable: false },
      {
        text: "创建时间",
        value: "createTime",
        align: "center",
        sortable: false
      },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ]
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.isSearch = false;
        this.offset = 0;
        this.getAgentList();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.isSearch = false;
        this.offset = 0;
        this.getAgentList();
      });
    });
  },
  created() {
    // this.initialize();
  },
  computed: {
    ...mapState(['agentItem']),
    pages() {
      if (
        this.pagination.rowsPerPage == null ||
        this.pagination.totalItems == null
      )
        return 0;

      return Math.ceil(
        this.pagination.totalItems / this.pagination.rowsPerPage
      );
    }
  },
  watch: {
  },
  methods: {
    initialize() {
      this.tableData = [
        {
          saleLevel: "Frozen Yogurt",
          headUrl: 159,
          lftid: 6.0,
          nickname: 24,
          telephone: 4.0,
          superId: 0,
          saleLevel: 1,
          sales: 888,
          createTime: "2018-4-19"
        },
        {
          saleLevel: "Ice cream sandwich",
          headUrl: 237,
          lftid: 9.0,
          nickname: 37,
          telephone: 4.3,
          superId: 0,
          saleLevel: 1,
          sales: 502,
          createTime: "2018-4-19"
        }
      ];
    }
  }
};
</script>

<style lang="less" scoped>

</style>

